<%--
  Created by IntelliJ IDEA.
  User: 20154
  Date: 2024/12/4
  Time: 8:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级信息管理</title>
    <%--引入ui框架--%>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<%--编写一个工具栏  元素命名为tb--%>
<div id="tb">
    <%--新增按钮；修改按钮；删除按钮；搜索栏--%>
    <%--ctrl+d--%>
    <a href="javascript:openClassAddDialog()" class="easyui-linkbutton" plain="true">添加班级</a>
    <a href="javascript:openClassUpdateDialog()" class="easyui-linkbutton" plain="true">修改班级</a>
    <a href="javascript:classDelete()" class="easyui-linkbutton" plain="true">删除班级</a>
    <div>
        班级名称：<input type="text" name="s_className" id="s_className">
        <a href="javascript:searchClass()" iconCls="icon-search" class="easyui-linkbutton" plain="true">搜索</a>
    </div>
</div>

<%--利用ui框架提供的表格工具，减少JSP代码与前端耦合--%>
<%--datagrid   表格数据来源于后端，需要请求后台获取数据  url="classList"  表格在加载时会自动请求这个地址获取数据 请求到的数据会按照某种格式排列好，告知表格组件如何渲染数据
pagination="true"  分页
rownumbers="true"  显示多少条数据
toolbar="#tb"  工具栏元素，toolbar指定了页面中的某个元素当做功能栏
--%>
<table id="dg" title="班级信息" class="easyui-datagrid" fitColumns="true" url="class/classList" pagination="true" rownumbers="true" fit="true" toolbar="#tb">
    <%--表头--%>
    <thead>
        <tr>
            <%--多选框--%>
            <th field="ck" checkbox="true"></th>
            <%--编号--%>
            <th field="id" width="50">ID</th>
            <%--班级名称--%>
            <th field="className" width="100">班级名称</th>
            <%--班级描述--%>
            <th field="classDesc" width="250">班级描述</th>
        </tr>
    </thead>
</table>
<%--新增班级的dialog--%>
<div id="dlg" class="easyui-dialog" style="width:450px;height:300px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post" >
        <table>
            <tr>
                <td>班级名称</td>
                <td><input type="text" name="className" id="className" class="easyui-validatebox" required="true"></td>
            </tr>
            <tr>
                <td valign="top">班级描述</td>
                <td><textarea rows="7" cols="30" type="text" name="classDesc" id="classDesc"></textarea></td>
            </tr>
        </table>
    </form>
</div>

<div id="dlg-buttons"  style="padding:30px 40px" >
    <a href="javascript:saveClass()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeClassDialog()" class="easyui-linkbutton" iconCls="icon-ok">关闭</a>
</div>
</body>
<script>
    var url;
    // 打开新增班级窗口
    function openClassAddDialog() {
        $("#dlg").dialog("open").dialog("setTitle","添加班级信息 ");
        url="class/classSave";
    }
    // 修改
    function openClassUpdateDialog() {
        var selectedRows=$("#dg").datagrid('getSelections');
        if(selectedRows.length!=1){
            $.messager.alert("系统提示","请选择一条要编辑的数据!");
            return;
        }
        var row=selectedRows[0];
        $("#dlg").dialog("open").dialog("setTitle","编辑班级信息 ");
        //直接加载到#fm中
        $("#fm").form("load",row);
        url="class/classSave?id="+row.id;
    }
    // 删除
    function classDelete() {
        var selectedRows=$("#dg").datagrid('getSelections');
        if(selectedRows.length==0){
            $.messager.alert("系统提示","请选择要删除的数据！");
            return;
        }
        var strIds=[];
        for(var i=0;i<selectedRows.length;i++){
            strIds.push(selectedRows[i].id);
        }
        var ids=strIds.join(",");
        $.messager.confirm("系统提示","您确认要删掉这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
            if(r){
                $.post("class/classDelete",{delIds:ids},function(result){
                    if(result.success){
                        $.messager.alert("系统提示","您已成功删除<font color=red>"+result.delNums+"</font>条数据！");
                        $("#dg").datagrid("reload");
                    }else{
                        $.messager.alert('系统提示','<font color=red>'+result.errorMsg+'</font>'+result.errorMsg);
                    }
                },"json");
            }
        });
    }
    // 搜索
    function searchClass() {
        $('#dg').datagrid('load',{
            className:$('#s_className').val()
        });
    }
    // 保存班级
    function saveClass() {
        $("#fm").form("submit",{
            url:url,
            onSubmit:function(){
                return $(this).form("validate");
            },
            success:function(result){
                if(result.errorMsg){
                    $.messager.alert("系统提示",result.errorMsg);
                    return;
                }else{
                    $.messager.alert("系统提示","保存成功");
                    //清空
                    resetValue();
                    //关闭
                    $("#dlg").dialog("close");
                    //重载
                    $("#dg").datagrid("reload");
                }
            }
        });
    }
    // 关闭窗口
    function closeClassDialog() {
        $("#dlg").dialog("close");
        resetValue();
    }
    // 重置表单
    function resetValue(){
        $("#className").val("");
        $("#classDesc").val("");
    }
</script>


</script>
</html>
